<template>
	<view>
		<!--  手机顶部高度 -->
		<view :style="{height: systemBarHeight + 'px'}">
		</view>
		<view class="navbar">
			<uni-nav-bar @clickLeft="fh" :border="false" left-icon="left" title="消息" />
		</view>

		<view class="dealer">
			<view class="dealer_item" v-for="(item,index) in dealerList" :key="index" @click="change(item)">
				<view class="dealer_item1">
					<image src="/static/xieyi.png" mode="" v-if="item.stats==false"></image>
					<image src="/static/xieyi2.png" mode="" v-if="item.stats==true"></image>
				</view>
				<view class="dealer_item2">
					<view class="dealer_item2_top">
						<image src="/static/logo.png" mode=""></image>
						<text>{{item.tit}}</text>
					</view>
					<view class="dealer_item2_bom">
						<text>门店地址：{{item.address}}</text>
					</view>
				</view>
				<view class="dealer_item3">
					<view class="dealer_item3_top">
						<image src="/static/dw.png" mode=""></image>
						<text>距离您</text>
					</view>
					<view class="dealer_item3_bom">
						<text>66.66km</text>
					</view>
				</view>
			</view>
		</view>

		<view class="bt">
			<text>选择</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				systemBarHeight: 0,
				dealerList: [{
						tit: '仿生机器人体验店',
						address: '北京东城区天安门0001号',
						stats: false
					},
					{
						tit: '仿生机器人体验店',
						address: '北京东城区天安门0001号',
						stats: false
					},
					{
						tit: '仿生机器人体验店',
						address: '北京东城区天安门0001号',
						stats: false
					}
				]
			}
		},
		mounted() {
			this.getSysteminfo()
		},
		methods: {
			getSysteminfo() {
				uni.getSystemInfo({
					success: res => {
						this.systemBarHeight = res.statusBarHeight;
					}
				});
			},
			fh() {
				uni.navigateBack({
					delta: 1 // 返回的页面层级，1表示返回上一页
				});
			},
			change(item) {
				item.stats = !item.stats
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dealer {
		.dealer_item {
			display: flex;
			align-items: center;
			width: 88%;
			margin: 45rpx auto 0;
			padding-bottom: 45rpx;
			border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);

			.dealer_item1 {
				>image {
					width: 45.8rpx;
					height: 45.8rpx;
				}
			}

			.dealer_item2 {
				margin-left: 25rpx;

				.dealer_item2_top {
					display: flex;
					align-items: center;

					>image {
						width: 46rpx;
						height: 46rpx;
						border-radius: 23rpx;
					}

					>text {

						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 31rpx;
						color: #152034;

					}
				}

				.dealer_item2_bom {
					margin-top: 19rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 23rpx;
					color: #7D8CA4;
				}
			}

			.dealer_item3 {
				margin-left: auto;

				.dealer_item3_top {
					display: flex;
					align-items: center;

					>image {
						width: 30.53rpx;
						height: 30.53rpx;
					}

					>text {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 23rpx;
						color: #A5AEBD;
						height: 30.53rpx;
					}
				}

				.dealer_item3_bom {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 23rpx;
					color: #A5AEBD;
					height: 30.53rpx;
					margin-left: 5rpx;
					margin-top: 5rpx;
				}
			}
		}
	}

	.bt {
		width: 626rpx;
		height: 95rpx;
		background: #1677FF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;

		margin: 60rpx auto 0;

		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 34rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>